<!-- pages/notification/notification-list.wxml -->
<view class="notification-list-page">
	<!-- 顶部导航栏 -->
	<view class="nav-bar">
		<view class="nav-back" bindtap="goBack">
			<image src="/static/icons/back.png" mode="aspectFit"></image>
		</view>
		<view class="nav-title">系统通知</view>
		<view class="nav-empty"></view> <!-- 占位，保持导航栏左右对齐 -->
	</view>

	<!-- 通知列表 -->
	<view class="notification-list">
		<!-- 通知项：未读状态 -->
		<view class="notification-item" bindtap="goToDetail" data-id="1">
			<view class="item-unread"></view> <!-- 未读小红点 -->
			<view class="item-content">
				<view class="item-title">【系统】小程序功能更新通知</view>
				<view class="item-time">2024-05-20 14:30</view>
			</view>
		</view>

		<!-- 通知项：已读状态 -->
		<view class="notification-item" bindtap="goToDetail" data-id="2">
			<view class="item-content item-read">
				<view class="item-title">【提醒】您的账号安全验证已完成</view>
				<view class="item-time">2024-05-18 09:15</view>
			</view>
		</view>

		<!-- 通知项：已读状态 -->
		<view class="notification-item" bindtap="goToDetail" data-id="3">
			<view class="item-content item-read">
				<view class="item-title">【活动】端午假期专属福利活动上线</view>
				<view class="item-time">2024-05-15 16:40</view>
			</view>
		</view>

		<!-- 通知项：未读状态 -->
		<view class="notification-item" bindtap="goToDetail" data-id="4">
			<view class="item-unread"></view>
			<view class="item-content">
				<view class="item-title">【公告】平台服务时间调整通知</view>
				<view class="item-time">2024-05-12 10:00</view>
			</view>
		</view>
	</view>
</view>

<style>
	/* pages/notification/notification-list.wxss */
	page {
		background-color: #f8f8f8;
		font-size: 28rpx;
		color: #333;
	}

	/* 导航栏样式 */
	.nav-bar {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
	}

	.nav-back image {
		width: 36rpx;
		height: 36rpx;
	}

	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
	}

	.nav-empty {
		width: 36rpx;
		height: 36rpx;
	}

	/* 通知列表样式 */
	.notification-list {
		padding: 20rpx 30rpx;
	}

	.notification-item {
		display: flex;
		align-items: flex-start;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 24rpx 30rpx;
		margin-bottom: 20rpx;
	}

	/* 未读标记 */
	.item-unread {
		width: 16rpx;
		height: 16rpx;
		background-color: #ff4d4f;
		border-radius: 50%;
		margin-right: 20rpx;
		margin-top: 8rpx;
	}

	/* 通知内容 */
	.item-content {
		flex: 1;
	}

	.item-title {
		font-size: 30rpx;
		line-height: 44rpx;
		margin-bottom: 8rpx;
	}

	.item-time {
		font-size: 24rpx;
		color: #999;
	}

	/* 已读状态样式 */
	.item-read .item-title {
		color: #666;
	}
</style>